//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
    AppRegistry, // 注册APP入口
    StyleSheet, //样式表组件
    Image, //添加Image组件
    TextInput,
    TouchableHighlight, //触摸高亮效果
    TouchableOpacity, //触摸透明效果
    TabBarIOS, //引入TabBarIOS组件
    Text, //文字组件,它里面只能放文字 类似于 span 标签
    View //结构组件,它类似于 div 标签
} from 'react-native';


//创建一个 MyApp 组件
class MyApp extends Component{
    constructor(){
        super();
        this.state={
           flag:'home'
        };
    };

    changeState(val){
        this.setState({
            flag:val
        });
    };

    render(){
       return(
           <TabBarIOS>

              <TabBarIOS.Item icon={require('./img/home.png')} title='主页' selected={this.state.flag == 'home'} onPress={this.changeState.bind(this,'home')}>
                <View style={styles.wp}>
                  <Text style={styles.txt}>芙蓉帐暖度春宵</Text>
                </View>
              </TabBarIOS.Item>

            <TabBarIOS.Item icon={require('./img/movie.png')} title='电影' selected={this.state.flag == 'movie'} onPress={this.changeState.bind(this,'movie')}>
             <View style={styles.wp}>
              <Text style={styles.txt}>少小离家老大回</Text>
             </View>
            </TabBarIOS.Item>

            <TabBarIOS.Item icon={require('./img/music.png')} title='音乐' selected={this.state.flag == 'music'} onPress={this.changeState.bind(this,'music')}>
            <View style={styles.wp}>
            <Text style={styles.txt}>金石土革丝木匏竹</Text>
            </View>
            </TabBarIOS.Item>

            <TabBarIOS.Item icon={require('./img/read.png')} title='阅读' selected={this.state.flag == 'read'} onPress={this.changeState.bind(this,'read')}>
            <View style={styles.wp}>
            <Text style={styles.txt}>长相思</Text>
            </View>
            </TabBarIOS.Item>


           </TabBarIOS>
       );


    };
}



//设置样式
const styles = StyleSheet.create({
    wp:{
        marginTop:40,
        paddingLeft:40
    },
    txt:{
       color:'#f00',
       fontSize:20,

    },

});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);